<template>
  <div class="lyricsbox">
    <div class="inner">
      <div class="lyleft">
        <div class="imgbox">
          <img :src="this.$store.state.song.picUrl" alt />
        </div>
      </div>
      <div class="lyright">
        <div class="close" @click="goback">
          <span class="el-icon-close"></span>
        </div>

        <div class="name">{{ getName }}</div>
        <div class="author">
          歌手：
          <span>{{ getAuthor }}</span>
        </div>
        <div class="lyricscontent">
          <ul v-if="getLyrics">
            <li
              v-for="(item, index) in getLyrics"
              :key="index"
              :class="getLyricsIndex == index ? 'currentLyric' : ''"
            >
              {{ item[1] }}
            </li>
          </ul>
          <span v-else>暂无歌词</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
  name: "musiclyrics",
  data() {
    return {
      val: "",
      scrolltop: 0,
    }
  },
  computed: {
    // vue辅助函数
    ...mapGetters(["getLyrics", "getName", "getAuthor", "getLyricsIndex"]),
  },
  watch: {
    getLyricsIndex: function(newValue, oldValue) {
      if (newValue == 0) {
        this.scrolltop = 0
      }
      if (newValue >= 8) {
        this.scrolltop = (newValue - 6) * 30
      }
      this.$refs.lyricsScroll.$refs.vs.scrollTo({
        y: this.scrolltop,
      })
    },
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    formDate(date) {
      //格式化时间过滤器
      var m = parseInt(date / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt(date % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
}
</script>
<style lang="scss" scoped>
.lyricsbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .inner {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
  }
  .lyleft {
    margin: 20px;
    margin-left: 60px;
    .imgbox {
      width: 250px;
      height: 250px;
      overflow: hidden;
      border-radius: 10px;
      img {
        width: 250px;
      }
    }
    .lybox {
      width: 250px;
      margin-top: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: rgb(59, 144, 214);
    }
  }
  .lyright {
    position: relative;
    margin: 20px 0px;
    width: calc(100% - 330px);
    height: calc(100% - 40px);
    .close {
      background: rgb(59, 144, 214);
      position: absolute;
      top: -10px;
      right: 15px;
      width: 30px;
      height: 30px;
      z-index: 1;
      span {
        font-size: 30px;
        color: white;
      }
    }
    .close:hover {
      cursor: pointer;
    }
    .name {
      margin: 20px 40px;
      margin-top: 0px;
      line-height: 40px;
      font-size: 28px;
      font-weight: bold;
    }
    .author {
      margin: 20px 40px;
      height: 20px;
      line-height: 20px;
      span {
        color: rgb(59, 144, 214);
      }
    }
    .lyricscontent {
      margin: 20px 40px;
      height: 300px;
      ul {
        height: 300px;
        li {
          word-break: break-all;
          line-height: 30px;
          list-style: none;
          font-size: 14px;
          color: rgb(161, 159, 159);
        }
        .currentLyric {
          color: #428dd8;
        }
      }
    }
    span {
      font-size: 14px;
      color: rgb(161, 159, 159);
    }
  }
}
</style>
